<template>
	<view class="banner d-flex">
		<view class="banner_left d-flex">
			<image class="banner_left_icon" src="/static/image/credit/banner.svg" mode="widthFix" />
			<text class="banner_left_title bold">信贷风险报告</text>
		</view>
		
		<view class="banner_right d-flex">
			<text v-for="(item, index) of list" :key="item.id" :class="[index !== list.length - 1 ? 'mb-20' : '', 'item']">{{ item.title }}</text>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue'

const list = reactive([
	{
		title: '全面探查',
		id: 1
	},
	{
		title: '合规授权',
		id: 2
	},
	{
		title: '权威数据',
		id: 3
	},
	{
		title: '实时更新',
		id: 4
	}
])
</script>

<style lang="scss" scoped>
.banner {
	padding: 25rpx;
	background-color: #6A1CF3;
	align-items: center;
	justify-content: space-between;
	
	&_left {
		flex-direction: column;
		
		&_icon {
			width: 500rpx;
		}
		
		&_title {
			color: #fff;
			font: {
				size: 40rpx;
				style: italic;
				family: "微软雅黑 Bold Oblique", "微软雅黑 Bold", "微软雅黑", sans-serif
			}
		}
	}
	
	&_right {
		flex-direction: column;
		.item {
			color: #fff;
			font: {
				size: 25rpx;
				style: italic;
			}
		}
	}
}
</style>